<template>
  <div class="app-container">
    <el-steps :active="active" finish-status="success">
      <el-step title="Step 1"></el-step>
      <el-step title="Step 2"></el-step>
      <el-step title="Step 3"></el-step>
    </el-steps>
    <el-card class="box-card" v-show="active===0">
      <el-form
        :model="dataForm"
        :rules="rules"
        ref="dataForm"
        label-width="250px"
        label-position="right"
      >
        <el-form-item label="Contract Specialist" prop="Specialist">
          <el-select v-model="dataForm.Specialist" placeholder="please select Contract Specialist">
            <el-option
              v-for="item in Specialist"
              :key="item.key"
              :label="item.key"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Did this Purchase Order Require" prop="IsRequire" required>
          <el-radio-group v-model="dataForm.IsRequire">
            <el-radio label="yes"></el-radio>
            <el-radio label="No"></el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="Rate">
          <el-rate v-model="dataForm.rate" style="line-height:50px;"></el-rate>
        </el-form-item>

        <el-form-item label="Customer Purchase Order Date" required>
          <el-col :span="5">
            <el-form-item prop="date1">
              <el-date-picker
                type="date"
                placeholder="sleect date"
                v-model="dataForm.date1"
                style="width: 100%;"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="0.5">-</el-col>
          <el-col :span="5">
            <el-form-item prop="date2">
              <el-time-picker
                placeholder="sleect date"
                v-model="dataForm.date2"
                style="width: 100%;"
              ></el-time-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
      </el-form>
      <div class="foot" style="text-align:right;">
        <el-button type="success" style="margin-top: 12px;" @click="next">下一步</el-button>
      </div>
    </el-card>

    <el-card class="box-card" v-show="active===1">
      <el-upload
        class="upload-demo"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :file-list="fileList"
        list-type="picture"
      >
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>

      <div class="foot" style="text-align:right;">
        <el-button style="margin-top: 12px;margin-right:10px;" @click="pre">上一步</el-button>
        <el-button type="success" style="margin-top: 12px;" @click="next">下一步</el-button>
      </div>
    </el-card>

    <el-card class="box-card" v-show="active===2">
      <el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" />
      <el-tree
        ref="tree2"
        :data="data2"
        :props="defaultProps"
        :filter-node-method="filterNode"
        class="filter-tree"
        default-expand-all
      />
       <div class="foot" style="text-align:right;">
        <el-button style="margin-top: 12px;margin-right:10px;" @click="pre">上一步</el-button>
        <el-button type="success" style="margin-top: 12px;" @click="Sumbmit">提交</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
const Specialist = [
  { key: "Marcus", value: "Marcus" },
  { key: "Tom", value: "beijing" }
];
export default {
  data() {
    return {
      active: 0,
      Specialist,
      dataForm: {
        Specialist: "",
        IsRequire: "",
        rate: null,
        date1: "",
        date2: ""
      },
      rules: {
        Specialist: [
          { required: true, message: "please select", trigger: "change" }
        ],
        IsRequire: [
          {
            required: true,
            message: "please select IsRequire",
            trigger: "change"
          }
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "pelease select date",
            trigger: "change"
          }
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "pelease select date",
            trigger: "change"
          }
        ]
      },
      fileList: [
        {
          name: "food.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
        },
        {
          name: "food2.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
        }
      ],
      filterText: "",
      data2: [{
        id: 1,
        label: 'Level one 1',
        children: [{
          id: 4,
          label: 'Level two 1-1',
          children: [{
            id: 9,
            label: 'Level three 1-1-1'
          }, {
            id: 10,
            label: 'Level three 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: 'Level one 2',
        children: [{
          id: 5,
          label: 'Level two 2-1'
        }, {
          id: 6,
          label: 'Level two 2-2'
        }]
      }, {
        id: 3,
        label: 'Level one 3',
        children: [{
          id: 7,
          label: 'Level two 3-1'
        }, {
          id: 8,
          label: 'Level two 3-2'
        }]
      }],
       defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
   watch: {
    filterText(val) {
      this.$refs.tree2.filter(val)
    }
  },
  methods: {
    next() {  
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
         if (this.active > 2) {
            this.active = 0;
          } else {
            this.active++;
          }
        }
      });
    },
    pre() {
      this.active--;
    },
    handleRemove(file, fileList) {
      //console.log(file, fileList);
    },
    handlePreview(file) {
      //console.log(file);
    },
     filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    Sumbmit(){
       this.$message({
          message: '提交成功',
          type: 'success'
        });
        this.resetForm();
        this.active=0;
    },
    resetForm() {
      this.$refs["dataForm"].resetFields();
    }
  }
};
</script>